<script setup lang="ts">
import { storeToRefs } from 'pinia';
import { useJobsStore } from '../store'
import { JobInfo } from '../types/jobs'
import { getRelativeTime} from '../utils/helpers'
// import { computed } from 'vue';
const jobStore = useJobsStore()

const { activeJobs } = storeToRefs(jobStore)

// 获取职位跳转地址
const getJobDetailUrl = (job: JobInfo) => {
  return `https://www.zhipin.com/job_detail/${job.encryptJobId}.html?lid=${job.lid}&securityId=${job.securityId}&sessionId=`
}

</script>

<template>
  <div class="job-list">
    <a class="job-link" :href="getJobDetailUrl(item)" v-for="item in activeJobs" :key="item.securityId" target="_blank">
      <div class="job-item">
        <div class="info-head">
          <h2>{{ item.jobName }}</h2>
          <p class="job-desc">{{ item.cityName }}-{{ item.areaDistrict }}-{{ item.businessDistrict }}</p>
        </div>
        <div>
          <span class="salary">{{ item.salaryDesc }}</span>
          <span class="tags" v-for="labels in item.jobLabels" :key="labels">{{ labels }}</span>
          <span class="tags outline">{{ item.bossName }} | {{ item.bossTitle }}</span>
          <span class="tags online" v-if="item.bossOnline">BOSS在线</span>
          <span class="tags online">{{ getRelativeTime(item.lastModifyTime )}}</span>
        </div>
      </div>
    </a>
  </div>
</template>

<style lang="scss" scoped>
.job-list {
  display: flex;
  flex-flow: wrap;
  margin-left: -10px;

  .job-link {
    display: block;
    min-width: 600px;
    margin-left: 20px;
  }
}

.job-item {
  background-color: white;
  margin-bottom: 20px;
  padding: 30px;
  color: #222;
  transition: all .25s;

  &:hover {
    box-shadow: 0 0 20px 0px rgba($color: darken(#00bebd, 3%), $alpha: 0.1);

    h2 {
      color: #00bebd;
    }
  }

  .info-head {
    display: flex;
    justify-content: space-between;

    h2 {
      font-weight: normal;
      font-size: 18px;
      transition: all .25s;
      margin-bottom: 10px;

    }

    .job-desc {
      font-size: 14px;
      color: gray;
    }
  }


  .salary {
    font-size: 16px;
    color: #fe574a;
    margin-right: 10px;
  }
}

.tags {
  background: #eee;
  padding: 4px 8px;
  border-radius: 4px;
  margin-right: 10px;
  font-size: 13px;
  border: 1px solid #eee;

  &.outline {
    background-color: white;
    color: #444;
  }

  &.online {
    background: #e1f5e3;
    color: #40b14f;
  }
}
</style>